<template>
	<el-row style="height:100%">
		<el-col :span="24" style="padding:10px;border: 1px solid #bfcbd9">
			<h3 style="padding-bottom: 10px">商品分类</h3>
			<el-row>
				<div class="btn-group">
					<el-button type="primary" size="small" icon="plus" @click="showAdd=true">添加分类</el-button>
					<!-- <el-button type="primary" size="small" icon="edit" @click="handleEdit()" >部门编辑</el-button>         -->
				</div>
				<div style="margin-top: 10px;">
					<el-tree :data="typeList" :props="defaultProps" node-key="id" :expand-on-click-node="false" :render-content="renderContent" class="treeDivs">
					</el-tree>
				</div>
			</el-row>
			<el-dialog title="商铺分类" size="tiny" :visible.sync="showAdd">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="分类名称">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.name"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="分类代码">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.code"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="父级类别">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-select v-model="parentId" placeholder="请选择">
									<el-option v-for="item in parentIdList" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<div style="text-align: center;margin-top: 10px;">
							<el-button type="primary" @click="doAdd">确定</el-button>
							<el-button @click="showAdd=false">取消</el-button>
						</div>
					</el-form-item>
				</el-form>
			</el-dialog>
		</el-col>
	</el-row>
</template>
<script>
	import {
		getGoodsTypeTree,
		save,
		update,
		del,
	} from '../../api/goodType'

	//	const coordtransform = KIT_Coordtransform.createNew();
	export default {
		components: {

		},
		data() {
			return {
				form: {},
				parentId: "",
				showAdd: false,
				parentIdList: [],
				typeList: [],
				defaultProps: {
					value: 'id',
					label: 'name',
					children: 'children'
				},
			}
		},
		methods: {
			doAdd() {
				this.doSave();
			},
			getTypeTree(pid) {

				let params = {
					parentId: pid
				}

				getGoodsTypeTree(params).then(res => {
					debugger;
				});
			},
			getTypeTreeFirst() {
				let that = this;
				let params = {

				}

				getGoodsTypeTree(params).then(res => {
					that.parentIdList = res.obj;
					that.typeList = res.obj
					debugger;
				});
			},
			doSave() {
				let that = this;
				let params = this.form;
				if(this.parentId != "")
					params.parentId = this.parentId;

				save(params).then(res => {
					that.showAdd = false;
					that.form = {};
					that.parentId = "";
					that.getTypeTreeFirst();
					debugger;
				});
			},
			handleDelete(data) {
				let that = this;
				let params = data

				this.$confirm('确定保存删除?', '提示', {
					type: 'warning'
				}).then(() => {
					del(params).then(res => {
						that.showAdd = false;
						that.form = {};
						that.parentId = "";
						that.getTypeTreeFirst();
						debugger;
					});
				});
			},
			handleEdit(data) {
				this.form = data;
				this.showAdd = true;
			},
			renderContent(h, {
				node,
				data,
				store
			}) {
				let html;

				html = <span class="clearfix">
                  <span style="float: right;margin-right: 5px;">
                    <el-button size="mini" on-click={()=>this.handleDelete(data)}>删除</el-button>
                    <el-button size="mini" on-click={()=>this.handleEdit(data)}>编辑</el-button>
                  </span>
                  <span style="display: inline-block; width: 24.6676%;">
                    {node.label}
                  </span>
                  <span style="display: inline-block; width: 10.84%;">
                    {data.code}
                  </span>
               </span>

				return(html);
			},
		},
		mounted() {
			this.getTypeTreeFirst();
		}
	}
</script>

<style lang="scss">

</style>